﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string[]>" %>
<tr>
    <th>
        <span class="mandate">*</span> Country
    </th>
    <td>
        <select data-bind="options: availableCountry, 
                   optionsCaption:'Please select...',
                   optionsText: 'Country_EN',
                   optionsValue: 'Country_ID'
                   " class="validate[required] chz hide" id="vmCountry" name="Country">
        </select>
    </td>
</tr>
<tr>
    <th>
        <span class="mandate">*</span> City
    </th>
    <td>
   
        <input type="text" name="CityInt" value="<%=(this.Model[1] !=null)?this.Model[1].ToString():""%>" class="validate[required] inp-form ">
    </td>
</tr>

<script type="text/javascript">
    $(document).ready(function() {
    //Begin Data
         var selected = "";
        <% if(Model[0].ToString()!=""){
         %>
            selected = <%=Model[0].ToString()%>;
         <%}  %>
        System.Data.CountryModel = function() {
            var self = this;
            //Country
            self.availableCountry = ko.observableArray([]);
           
            
            //save
           
            ( function() {
                $.getJSON(BASE_URL + "Listings/Ajax/GetCountry", function(result) {
                    self.availableCountry(result.Data);
                   
                    $("#vmCountry").chosen({
                        allow_single_deselect: true
                    });
                     if(selected !=""){
                           
                            $("#vmCountry").val(selected).trigger("liszt:updated");
                      }
                    $("#vmCountry").removeClass("hide");
                });
                })();


               
            };
        
        //Fill Data
        var vmCountry = new System.Data.CountryModel();
      
        ko.applyBindings(vmCountry, $("#vmCountry")[0]);

    });

</script>

